<script lang="ts" setup>
import {Timer} from '@element-plus/icons-vue'
import {onMounted, ref} from "vue";
import axios from "axios";

const bus_id = ref(2)

function handleEdit(index, row) {

}

function handleDelete(index, row) {

}

onMounted(() => {
  axios.get("/shop/getShopsByBusiness_Id",{params:{bus_id:bus_id.value}}).then(res => {
    console.log(res.data)
    tableData.value = res.data.data.shops;
  })
})

function submitForm() {
  // 处理表单提交
  axios.put("/business/createShop",CreateShopRequestDto.value).then(res=>{
    if(res.data.code==200){
      alert("创建成功！")
      tableData.value=res.data.data.shopResponses
    }
  })
  dialogVisible.value = false;
}

const tableData = ref([])
//表单是否可见
const dialogVisible = ref(false)
//填写内容
const Shop = ref({
  shopName: "",
  createTime:""
})
const CreateShopRequestDto=ref({
  bus_id:"2",
  shop:Shop.value
})
</script>

<template>
  <div class="wrapper">
    <div class="addShopInfo">
      <el-button @click="dialogVisible = true">新增门店</el-button>
      <el-dialog v-model="dialogVisible"
                 title="添加门店信息"
                 width="30%"
      >
        <el-form :model="Shop">
          <el-form-item label="门店名称">
            <el-input v-model="Shop.shopName"></el-input>
          </el-form-item>
            <el-form-item label="创建时间">
              <el-input v-model="Shop.createTime" placeholder="不填写，默认当前时间"></el-input>
            </el-form-item>
          <!-- 更多表单项 -->
        </el-form>
        <template #footer>
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </template>
      </el-dialog>
    </div>
    <div class="shopList_table">
      <el-table :data="tableData" style="width: 100%;height: 60vh">

        <el-table-column label="创建时间" width="180">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-icon>
                <timer/>
              </el-icon>
              <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="更新时间" width="180">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-icon>
                <timer/>
              </el-icon>
              <span style="margin-left: 10px">{{ scope.row.updateTime }}</span>
            </div>
          </template>
        </el-table-column>


        <el-table-column label="门店名字" width="180">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ scope.row.shopName }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
            >编辑
            </el-button
            >
            <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
            >删除
            </el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<style scoped>
.wrapper {
  width: 100%;
  height: 100%;
}

.wrapper .addShopInfo {
  width: 100%;
  height: 2vw;
  margin-top: 1vh;
  margin-bottom: 1vh;
}
</style>
